<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><fmt:message code="global.lang.allsearch"/></title>
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" type="text/css" href="/css/base/base.css?20201106.1" />
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <link rel="stylesheet" href="/css/workflow/flowrun/allsearch.css">
    <script src="/js/common/language.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script src="/js/jquery/jquery.cookie.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        #headerbox{
            height: 43px;
            line-height: 43px;
        }
        #headerbox .title{
            margin-left: 22px;
            height: 43px;
        }
        #headerbox .title img{
            margin-bottom: 5px;
        }
        #headerbox span{
            float: none;
            display: inline-block;
            height: 43px;
            line-height: 43px;
        }
        .headerTitle{
            margin-left: 5px;
            font-size: 22px;
            color: #333;
            line-height: 18px;
        }
        .color2 {
            color: #50C625;
        }
        .color3 {
            color: #F4A8BD;
        }
        table tr{
            border: none;
        }
        body{
            background: #f6f7f9;
        }
        .head{
            height: auto;
            border: none;
        }
        .tablebox{
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="head" id="headerbox" style="border-bottom: 1px solid #9E9E9E;">
        <div class="title">
            <img src="/img/commonTheme/${sessionScope.InterfaceModel}/flow_run_title.png">
            <span class="headerTitle"><fmt:message code="global.lang.allsearch.pleasechooseflow"/></span>
            <span style="margin-left: 49px;">    颜色标识说明：</span>
            <span class="color2">■</span>
            <span>办理中   </span>
            <span class="color3">■</span>
            <span>已结束   </span>
        </div>
    </div>
    <%--<div class="boxdiv" style="display: none">--%>
        <%--<table class="" id="tableBox">--%>
            <%--<thead>--%>
                <%--<tr>--%>
                    <%--<th width="70%" style="text-align: left;">--%>
                        <%--<span style="margin-left: 10px">表单名称</span>--%>

                    <%--</th>--%>
                    <%--<th>--%>
                        <%--操作--%>
                    <%--</th>--%>
                <%--</tr>--%>
            <%--</thead>--%>
            <%--<tbody>--%>

            <%--</tbody>--%>
        <%--</table>--%>
    <%--</div>--%>
    <%--<div class="hideenHTML" style="display: none">--%>

    <%--</div>--%>
    <div class="tablebox" style="display: none">
        <table width="99%" border="0" cellpadding="0" cellspacing="0" style="margin-top:40px;">
            <tbody>
            <tr>
                <td width="50%" valign="top">
                    <div id="div_l">

                    </div>
                </td>

                <td width="50%" valign="top">
                    <div id="div_r">

                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
<script>
    function clickExport(e){
        layer.load();
        var flowId = e.attr('flowId')||'';
        var formId = e.attr('formId')||'';
        $.ajax({
            url:"/form/formType",
            type:'post',
            data:{
                fromId:formId
            },
            dataType:'json',
            success:function(res){
                var html = res.object.printModel;
                $('.hideenHTML').html(html);
                var arr = [];
                var $form_item = $('.hideenHTML').find(' .form_item');
                var length = $form_item.length;
                for(var i=0;i<length;i++){
                    var name = $form_item.eq(i).attr('name');
                    var title = $form_item.eq(i).attr('title');
                    var object = {
                        'key':name,
                        'value':title
                    };
                    arr.push(object);
                };
                arr = JSON.stringify(arr);
                exportajax(flowId,arr);
            }
        });
    }
    function exportajax(flowId,arr){
        //window.location.href='/flowRun/exportFlowData?flowId='+ flowId +'&formdata='+arr;
        layer.closeAll();
       $.ajax({
           url:"/flowRun/saveFlowData",
           type:'post',
           data:{
               flowId:flowId,
               formdata:arr
           },
           success:function(res){
               if(res.flag){
                   if(res.attributes.state == 1){
                       window.location.href='/flowRun/exportFlowData?flowId='+ flowId;
                       layer.closeAll();
                   }else{
                       layer.msg(res.attributes.message,{icon:2});
                   }
               }else{
                   layer.closeAll();
               }
           }
       });
    }

    function _resize(module_id) {
        var module_i=$("#module_"+module_id);
        var head_i=$("#module_"+module_id+"_head");
        var body_i=$("#module_"+module_id+"_body");
        var img_i=$("#img_resize_"+module_id);
        if(body_i.is(":hidden")){
            module_i.removeClass("listColorCollapsed");
            head_i.removeClass("moduleHeaderCollapsed");
            body_i.show();
            img_i.attr('src','/img/workflow/flowRun/expand_arrow.png');
            img_i.attr('title','折叠');
        }else {
            module_i.addClass("listColorCollapsed");
            head_i.addClass("moduleHeaderCollapsed");
            body_i.hide();
            img_i.attr('src','/img/workflow/flowRun/collapse_arrow.png');
            img_i.attr('title','展开');
        }
    }

    function _resizeCchild(module_id) {
        var ul_i = $("#module_"+module_id+"_ul");
        var img_i = $("#img_resize_"+module_id);
        if(ul_i.is(":hidden")) {
            img_i.attr('src','/img/workflow/flowRun/expand_arrow.png');
            img_i.attr('title','折叠');
            ul_i.show() ;
        }
        else {
            img_i.attr('src','/img/workflow/flowRun/collapse_arrow.png');
            img_i.attr('title','展开');
            ul_i.hide() ;

        }
    }
    $(function(){
        var index = layer.load();
        $.ajax({
            url:"/flow/searchAllType",
            type:'post',
            dataType:'json',
            success:function(res){
                if(res.flag){
                    var str_left = '',str_right = '',data = res.datas,index_num = 0;
                    res.datas.forEach(function(firstElement,firstIndex){//第一层
                        var num1 = firstIndex%2 ==0?1:2;//判断当前项为奇数项或者偶数项
                        var firstchild = '';
                        var firstflowtype = '';
                        if(firstElement.childs.length > 0){//第二层
                            var secondchild = '';
                            var secondflowtype = '';
                            for(var i=0;i<firstElement.childs.length;i++){
                                if(firstElement.childs[i].childs.length > 0){//第三层
                                    var thirdchild = '';
                                    var thirdflowtype = '';
                                    for(var j=0;j<firstElement.childs[i].childs.length;j++){
                                        if(firstElement.childs[i].childs[j].childs.length > 0){//第四层,现在后台无法返回第四层结构数据

                                        }
                                        if(firstElement.childs[i].childs[j].flowTypeModels.length > 0){
                                            for(var z=0;z<firstElement.childs[i].childs[j].flowTypeModels.length;z++){
                                                if(firstElement.childs[i].flowTypeModels.length != 0 && firstElement.childs[i].flowTypeModels[j] != undefined &&flowTypeModels[z].handling != undefined && firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].handling != ''){
                                                    var work = '<span class="color2">■</span>'+ firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].handling +'   ';
                                                }else{
                                                    var work = '';
                                                }
                                                if(firstElement.childs[i].flowTypeModels.length != 0 &&  firstElement.childs[i].flowTypeModels[j] != undefined  && firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].end != undefined&&firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].end != ''){
                                                    var end = '<span class="color3">■</span>'+ firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].end;
                                                }else{
                                                    var end = '';
                                                }
                                                if(firstElement.childs[i].flowTypeModels.length != 0 && firstElement.childs[i].flowTypeModels[j] != undefined && firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowType == 1){
                                                    var flowtype = '固定';
                                                }else if(firstElement.childs[i].flowTypeModels.length != 0 && firstElement.childs[i].flowTypeModels[j] != undefined && firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowType == 2){
                                                    var flowtype = '自由';
                                                }else{
                                                    var flowtype = '';
                                                }
                                                if(firstElement.childs[i].flowTypeModels.length != 0 && firstElement.childs[i].flowTypeModels[j] != undefined &&  firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowDoc == 0){
                                                    var flowDoc = '否';
                                                }else if(firstElement.childs[i].flowTypeModels.length != 0 && firstElement.childs[i].flowTypeModels[j] != undefined && firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowDoc == 1){
                                                    var flowDoc = '是';
                                                }else{
                                                    var flowDoc = '';
                                                }
                                                if(firstElement.childs[i].flowTypeModels.length != 0){
                                                    if(firstElement.childs[i].flowTypeModels[j] != undefined ) {
                                                        thirdflowtype += '<li><a href="allSearchList?FLOW_ID=' + firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowId + '" title="流程类型：' + flowtype + '\n\
允许附件：' + flowDoc + '">' + firstElement.childs[i].flowTypeModels[j].flowTypeModels[z].flowName + '</a>&nbsp;&nbsp;&nbsp;' + work + end + '</li>'
                                                    }
                                                }else{
                                                    thirdflowtype += '';
                                                }

                                            }
                                        }
                                        secondchild += '<span style="cursor:pointer;display:block;" onclick="_resizeCchild('+ index_num +');"><img style="margin-left:0px;" class="icon" id="img_resize_'+ index_num +'" src="/img/workflow/flowRun/expand_arrow.png" title="_(&quot;折叠&quot;)"><span id="module_'+ index_num +'_text" class="text">'+ firstElement.childs[i].childs[j].sortName +'</span></span><ul style="margin-left:15px;" id="module_'+ index_num +'_ul">'+ thirdflowtype+thirdchild +'</ul>'
                                        thirdflowtype = '';
                                        thirdchild = '';
                                        index_num++;
                                    }
                                }
                                if(firstElement.childs[i].flowTypeModels.length > 0){
                                    for(var j=0;j<firstElement.childs[i].flowTypeModels.length;j++){
                                        if(firstElement.childs[i].flowTypeModels[j].handling != undefined&&firstElement.childs[i].flowTypeModels[j].handling != ''){
                                            var work = '<span class="color2">■</span>'+ firstElement.childs[i].flowTypeModels[j].handling +'   ';
                                        }else{
                                            var work = '';
                                        }
                                        if(firstElement.childs[i].flowTypeModels[j].end != undefined&&firstElement.childs[i].flowTypeModels[j].end != ''){
                                            var end = '<span class="color3">■</span>'+ firstElement.childs[i].flowTypeModels[j].end;
                                        }else{
                                            var end = '';
                                        }
                                        if(firstElement.childs[i].flowTypeModels[j].flowType == 1){
                                            var flowtype = '固定';
                                        }else if(firstElement.childs[i].flowTypeModels[j].flowType == 2){
                                            var flowtype = '自由';
                                        }else{
                                            var flowtype = '';
                                        }
                                        if(firstElement.childs[i].flowTypeModels[j].flowDoc == 0){
                                            var flowDoc = '否';
                                        }else if(firstElement.childs[i].flowTypeModels[j].flowDoc == 1){
                                            var flowDoc = '是';
                                        }else{
                                            var flowDoc = '';
                                        }
                                        secondflowtype += '<li><a href="allSearchList?FLOW_ID='+ firstElement.childs[i].flowTypeModels[j].flowId +'" title="流程类型：'+ flowtype +'\n\
允许附件：'+ flowDoc +'">'+ firstElement.childs[i].flowTypeModels[j].flowName +'</a>&nbsp;&nbsp;&nbsp;'+ work+end +'</li>'
                                    }
                                }
                                firstchild += '<span style="cursor:pointer;display:block;" onclick="_resizeCchild('+ index_num +');"><img style="margin-left:0px;" class="icon" id="img_resize_'+ index_num +'" src="/img/workflow/flowRun/expand_arrow.png" title="_(&quot;折叠&quot;)"><span id="module_'+ index_num +'_text" class="text">'+ firstElement.childs[i].sortName +'</span></span><ul style="margin-left:15px;" id="module_'+ index_num +'_ul">'+ secondflowtype+secondchild +'</ul>'
                                secondflowtype = '';
                                secondchild = '';
                                index_num++;
                            }
                        }
                        if(firstElement.flowTypeModels.length > 0){
                            for(var j=0;j<firstElement.flowTypeModels.length;j++){
                                if(firstElement.flowTypeModels[j].handling != undefined&&firstElement.flowTypeModels[j].handling != ''){
                                    var work = '<span class="color2">■</span>'+ firstElement.flowTypeModels[j].handling +'   ';
                                }else{
                                    var work = '';
                                }
                                if(firstElement.flowTypeModels[j].end != undefined&&firstElement.flowTypeModels[j].end != ''){
                                    var end = '<span class="color3">■</span>'+ firstElement.flowTypeModels[j].end;
                                }else{
                                    var end = '';
                                }
                                if(firstElement.flowTypeModels[j].flowType == 1){
                                    var flowtype = '固定';
                                }else if(firstElement.flowTypeModels[j].flowType == 2){
                                    var flowtype = '自由';
                                }else{
                                    var flowtype = '';
                                }
                                if(firstElement.flowTypeModels[j].flowDoc == 0){
                                    var flowDoc = '否';
                                }else if(firstElement.flowTypeModels[j].flowDoc == 1){
                                    var flowDoc = '是';
                                }else{
                                    var flowDoc = '';
                                }

                                firstflowtype += '<li><a href="allSearchList?FLOW_ID='+ firstElement.flowTypeModels[j].flowId +'" title="流程类型：'+ flowtype +'\n\
允许附件：'+ flowDoc +'">'+ firstElement.flowTypeModels[j].flowName +'</a>&nbsp;&nbsp;&nbsp;'+ work+end +'</li>'
                            }
                        }
                        if(num1 == 1){
                            str_left +=  '<div id="module_'+ index_num +'" class="module color_style_4 listColor">\
                                            <div class="head" onclick="_resize('+ index_num +');" style="cursor:pointer">\
                                                <h4 id="module_'+ index_num +'_head" class="moduleHeader">\
                                                    <img class="icon" id="img_resize_'+ index_num +'" src="/img/workflow/flowRun/expand_arrow.png" title="_(&quot;折叠&quot;)"><span id="module_'+ index_num +'_text" class="text">'+ firstElement.sortName +'</span>\
                                                </h4>\
                                            </div>\
                                            <div id="module_'+ index_num +'_body" class="module_body">\
                                                <div id="module_'+ index_num +'_ul" class="module_div">\
                                                    <ul>'+ firstflowtype+firstchild +'</ul>\
                                                </div>\
                                            </div>\
                                        </div>';
                            index_num++;
                        }else{
                            str_right +=  '<div id="module_'+ index_num +'" class="module color_style_4 listColor">\
                                            <div class="head" onclick="_resize('+ index_num +');" style="cursor:pointer">\
                                                <h4 id="module_'+ index_num +'_head" class="moduleHeader">\
                                                    <img class="icon" id="img_resize_'+ index_num +'" src="/img/workflow/flowRun/expand_arrow.png" title="_(&quot;折叠&quot;)"><span id="module_'+ index_num +'_text" class="text">'+ firstElement.sortName +'</span>\
                                                </h4>\
                                            </div>\
                                            <div id="module_'+ index_num +'_body" class="module_body">\
                                                <div id="module_'+ index_num +'_ul" class="module_div">\
                                                    <ul>'+ firstflowtype+firstchild +'</ul>\
                                                </div>\
                                            </div>\
                                        </div>';
                            index_num++;
                        }
                    })
                }else{

                }
                $('#div_l').html(str_left);
                $('#div_r').html(str_right);
                $('.tablebox').show();
                layer.close(index);
            }
        })
    })
</script>
</body>
</html>